<template>
  <el-dialog :element-loading-text="ui.loadingText"
             v-loading="ui.busying"
             :before-close="handleClose"
             :title="title"
             append-to-body
             visible
             lock-scroll
             width="600px">
    <el-form :model="form"
             label-width="80px"
             ref="form">
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="资源名称"
                        required
                        :mk-le-length="10"
                        :mk-ge-length="2"
                        prop="resourcename">
            <el-input placeholder="请输入资源名称"
                      v-model="form.resourcename"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="资源编码"
                        required
                        :mk-le-length="10"
                        :mk-ge-length="2"
                        prop="resourcecode">
            <el-input placeholder="请输入资源编码"
                      v-model="form.resourcecode"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="资源图标"
                        :mk-le-length="32"
                        prop="resicon">
            <el-input placeholder="请输入资源图标"
                      v-model="form.resicon"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="标签"
                        prop="retag">
            <mk-config-select v-model="form.retag"
                              mk-config="RESOURCETAG"
                              mk-empty
                              mk-empty-label="无">
            </mk-config-select>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="资源地址"
                        :mk-le-length="200"
                        prop="resourceurl">
            <el-input placeholder="请输入资源地址"
                      v-model="form.resourceurl"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="是否有效"
                        prop="resourcestate">
            <el-switch v-model="form.resourcestate"
                       active-text=""
                       inactive-text=""
                       active-value="1"
                       inactive-value="0">
            </el-switch>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="资源排序"
                        prop="orderno">
            {{form.orderno}}
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="备注"
                        prop="remark">
            <el-input type="textarea"
                      :rows="2"
                      :mk-le-length="200"
                      placeholder="请输入备注"
                      v-model="form.remark">
            </el-input>
          </mk-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <mk-button @click="handleClose">取消</mk-button>
      <mk-button :loading="ui.busying"
                 @click="save"
                 :type="2">{{btnName}}</mk-button>
    </div>
  </el-dialog>
</template>


<script>
import { MkBase } from 'element-ui'
import formData from './form-data'
export default {
  name: 'resource-form',
  mixins: [MkBase],
  props: {
    row: Object,
    isAdd: Boolean,
    title: String,
    btnName: String,
    addPid: String
  },
  data () {
    const form = formData()
    return {
      form,
      ui: {
        formLabelWidth: '80px',
        busying: true,
        loadingText: '正在加载'
      }
    }
  },
  async mounted () {
    if (this.isAdd === false) {
      let data = await this.$get(`/cpResource/${this.row.id}/resource.json`)
      this.form = data
    } else {
      this.$empty(this.form)
      this.form.resourcestate = '1'
      this.form.resourcetype = '0'
      this.form.orderno = 0
      this.form.resourcepid = this.addPid
    }
    this.ui.busying = false
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    save: async function () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      if ((await this.validate()) === false) {
        return
      }
      this.ui.loadingText = '正在保存'
      this.ui.busying = true
      try {
        let result
        if (this.isAdd === true) {
          result = await this.$post('/cpResource/add.json', this.form)
        } else {
          result = await this.$put('/cpResource/update.json', this.form)
        }
        if (result) {
          this.$emit('close', true)
        }
      } finally {
        this.ui.busying = false
      }
    }
  }
}
</script>
